<template>
  <div class="product-container">
    <!-- 使用公共页头组件 -->
    <CommonHeader title="商品列表" />
    
    <!-- 商品列表内容 -->
    <div class="product-list">
      <div class="product-item" v-for="goods in goodslist" :key="goods.id">
        <div class="item-image-container">
          <img class="item-image" :src="goods.img" alt="商品图片">
        </div>
        <div class="item-info">
          <h3 class="item-name">{{ goods.name }}</h3>
          <div class="item-price">{{ goods.price | currency }}</div>
          <div class="item-actions">
            <button 
              class="add-to-cart-btn" 
              :loading="goods.id === loadingGoodsId"
              @click="handleAddToCart(goods)"
            >
              <i class="fa fa-shopping-cart mr-1"></i>
              <span>加入购物车</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import CommonHeader from './CommonHeader.vue'
import { Message } from 'element-ui' // 引入Element UI的Message组件

export default {
  components: {
    CommonHeader
  },
  data() {
    return {
      loadingGoodsId: null // 控制按钮加载状态
    }
  },
  computed: mapState({
    goodslist: state => state.goods.goodslist
  }),
  methods: {
    ...mapActions('shopcart', ['insert']),
    handleAddToCart(goods) {
      // 设置加载状态，防止重复点击
      this.loadingGoodsId = goods.id
      
      // 模拟加入购物车的异步操作（实际项目中可能是API请求）
      this.insert(goods).then(() => {
        // 成功加入购物车后显示提示
        Message({
          message: `已成功将 ${goods.name} 加入购物车`,
          type: 'success',
          duration: 2000, // 显示2秒
          center: true,  // 居中显示
          onClose: () => {
            this.loadingGoodsId = null // 提示关闭后取消加载状态
          }
        })
      }).catch(error => {
        // 处理加入购物车失败的情况
        Message({
          message: '加入购物车失败，请稍后再试',
          type: 'error',
          duration: 2000,
          center: true,
          onClose: () => {
            this.loadingGoodsId = null
          }
        })
        console.error('Add to cart failed:', error)
      })
    }
  },
  created() {
    this.$store.dispatch('goods/getList')
  },
  
  filters: {
    currency (value) {
      return '¥ ' + value
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.product-list {
  display: grid;
  margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.product-item {
  display: flex;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.item-image-container {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.item-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.item-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.item-price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 10px;
}

.item-actions {
  text-align: right;
}

.add-to-cart-btn {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.add-to-cart-btn:hover {
  background-color: #27ae60;
  transform: scale(1.02); /* 悬停时轻微放大 */
}

.add-to-cart-btn:active {
  transform: scale(0.98); /* 点击时轻微缩小 */
}

.add-to-cart-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.mr-1 {
  margin-right: 5px;
}
</style>